<script src="./vue.js"></script>

<div id="app">
    <!-- 父组件的使用 -->
    <my-parent></my-parent>
</div>

<!-- 定义子组件 -->
<template id="child">
    <div>
        <ul>
            <li>手机品牌：{{show.pingpai}}</li>
            <li>手机型号：{{show.type}}</li>
            <li>手机价格：{{show.price}}</li>
        </ul>
    </div>
</template>

<!-- 定义父组件 -->
<template id="parent">
    <div>
        <h3>手机搜索</h3>
        <label>手机品牌:</label><input type="text" v-model="pingpai" />
        <my-child v-bind:name="pingpai"></my-child>
    </div>
</template>

<script>
    //对父组件进行注册
    Vue.component('my-parent', {
        template: "#parent",   //绑定模板
        data() {
            return {
                pingpai: "" //设置父组件的变量

            }
        }
    })

    //对子组件的进行注册
    Vue.component("my-child", {
        template: "#child",
        data() {
            return {
                //设置要查询的数据集合
                content: [
                    { "pingpai": "苹果", "type": "iphone7", "price": 12388 },
                    { "pingpai": "华为", "type": "电脑", "price": 388 },
                    { "pingpai": "黑米", "type": "东北黑米", "price": 388 },
                    { "pingpai": "大米", "type": "大米东北的", "price": 388 },
                ],
                //设置数据绑定的对象
                show: {"pingpai": "","type":"","price":''}
            }
        },
        props:["name"],//设置父组件与子组件相互传值的属性设置
        watch:{
            //通过获取父组件传递的数值进行查找
            name(){
                //判断数值是否为空
                if(this.$props.name){
                    //设置返回值
                    var found=false
                    // 查找与数据相同的值
                    this.content.forEach((v,i) => {
                        if(v.pingpai===this.$props.name){
                            //获取相同数值的集合
                            found = v
                        }
                    });
                    // 将查询的数据值赋值到对象中
                    this.show = found ? found: {"pingpai": "","type": "","price": ''}
                }else{
                    return
                }
            }
        }
    })

    var vu = new Vue({
        el: '#app',
    })
</script>